<template lang="pug">
div(class="_file_box")
    span(class="_file_name" v-if="!value" @click="fileClick(fileId)" style="color: #C9CCD1;" :class="{_error_file: attaUrlBlo}") 请选择文件
    span(class="_file_name" v-else style="color: #515a6e;" @click="fileClick(fileId)" :title="value") {{value}}
    input(type="file" :disabled="disabled" :ref="'file' + fileId" class="_file" @change="fileChange(fileId)")
    div(:class="{_error: attaUrlBlo}" v-if="attaUrlBlo") 请上传附件
</template>
<script>
export default {
  name: 'file',
  props: {
    // 路径保存位置
    value: {
      type: String,
      default: ''
    },
    // 这个上传输入框的ID用于调用ref方法
    fileId: {
      type: [Number, String],
      default: ''
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否选择
    attaUrlBlo: {
      type: Boolean,
      default: false
    }
    //
  },
  data () {
    return {
    }
  },
  methods: {
    // 点击触发file点击事件
    fileClick (fileId) {
      this.$refs['file' + fileId].click()
    },
    // file change事件
    fileChange (fileId) {
      this.$emit('input', this.$refs['file' + fileId].value)
      let file = new FormData()
      file.append('atta', this.$refs['file' + fileId].files[0])
      this.$emit('change', file, this.fileId)
    }
  }
}
</script>

<style lang="less" scoped>
._file_box{
  position: relative;
  ._file_name{
    display: block;
    border: 1px solid #dcdee2;
    background-color: #fff;
    height: 32px;
    border-radius: 4px;
    line-height: 22px;
    padding: 4px 7px;
    width: 200px;
    z-index: 1;
    position: absolute;
    overflow:hidden ;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  ._file_name:hover{
    border:1px solid #57a3f3;
  }
  ._error_file{
    border: 1px solid #ed4014;
  }
   ._error{
      color: #ed4014;
  }
   ._file{
    height: 32px;
    width: 200px;
    opacity: 0;
  }
}
</style>
